Bundling and minification are two techniques you can use in ASP.NET 4.5 to improve request load time. Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.)
Bundling: It’s a simple logical group of files that could be referenced by unique name and being loaded with one HTTP requestor.
Minification: It’s a process of removing unnecessary whitespace, line break and comments from code to reduce its size thereby improving load times.
Most of the current major browsers limit the number of simultaneous connections per each hostname to six. That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser.
Basically a developer uses multiple JS and CSS files for modularity, readability and maintainability of code and it’s a good practice too. But in some cases it leads to degradation of the overall performance of the website. Because multiple JS and CSS files require multiple HTTP requests from a browser leads to degrade the performance & load time of your web pages.
In real-time, almost every website uses Minification technique to improving their load times, but bundling is not used commonly because every page required different sets of files and the application will also not support as much to make it simpler.
Implement Bundling and Minification in MVC 4 application
Microsoft provides assembly Microsoft.Web.Optimization (Namespace: System.Web.Optimization) for Bundling and Minification, which is installed by default with new ASP.NET MVC4 application template as NuGet package.
For demonstration need some assemblies and namespaces, so I have open MVC 4 application with “Internet Option”. Steps are given below.
Step 1: Open ASP.NET MVC 4 Application.
Step 2: Select Internet Application option with Razor View.
Step 3: Created two JavaScript, tow Script file and view
Step 4: Here I have written some css for <h1> tag in StyleSheet_1.css and StyleSheet_2.css
StyleSheet_1.css
/*This code set h1 header tag color red*/
h1
{
color:Red;
}
StyleSheet_2.css
/*This code set h1 header tag color red*/
h2
{
color:Blue;
}
Step 5: Add style sheet on Index.cshtml file
Step 6: changed Globle.asax.cs for run demo view
Step 7: Before starts implementing the Bundling and Minification technique, first inspect the actual performance of the web page using firebug (Firefox developer tool). This (firebug) is application of Mozilla and you can easily install.
Step 8: Here we can see that Index.cshtml on CSS made two browser requests (StyleSheet_1.css, StyleSheet_2.css) and the response size is 139 B. Because I have not added any single line of code in Jscript_1.js and Jscript_2.js, so here we not describe Jscript file, but steps are same as CSS.
Step 9: Now I’m going to implement Bundling and Minification in this project
Step 10: Open Global.asax.cs and right click on “BundleConfig.RegisterBundles(BundleTable.Bundles);” and select “Go to Definition”.
Step 11: Write below code in BunldeConfig.cs
bundles.Add(new ScriptBundle("~/js_bundle/js").Include("~/js/JScript_1.js.js", "~/js/JScript_2.js.js"));
bundles.Add(new StyleBundle("~/css_bundle/css").Include("~/css/StyleSheet_1.css", "~/css/StyleSheet_2.css"));
Step 12: replace css and js link to below code from Index.cshtml
@Scripts.Render("~/js_bundle/js")
@Styles.Render("~/css_bundle/css")
Step 11: Change debug="true" to debug="false" in Web.config file within system.web tag
Step 13:Now project is ready. But before run project, clean the browser history and see output in Firebug tool.
Step 14: Compare Step 13 figure to step 7 figures. Let see, Here (Step 13’s Figure) only one request and file size reduce 139 B to 27 B. When we see in view source page some points are noted.
1. Two css file link converted into single link.
2. File path encripted.
3. Two file’s contents converted into single file.
4. Commented lines will we removed.
5. Size of file reduced.
I hope you enjoy this Article.
Leave Comment